<!--
 * @Description: 基线
 * @Author: charles
 * @Date: 2021-08-17 18:06:01
 * @LastEditors: charles
 * @LastEditTime: 2021-08-17 18:57:09
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基线</title>
  <style>
    html{
      font: normal 12px/1.5 '微软雅黑';
    }
    body { margin: 0; }
    .box { background-color: lightblue; }
    .inlineblock { display: inline-block; }
    .span1 { background-color: lightcoral; }
    .span2 { background-color: lightseagreen; }
    .span3 { background-color: maroon; }
    .over { overflow: hidden; }
    .image {
      vertical-align: baseline;
      
    }
  </style>
</head>
<body>
  <div class="box">
    <span>sphinx</span>
    <span>汉字</span>
    <img class="image" src="./images/cat.jpg" alt="">
    <input type="text">
    <span class="inlineblock span1">span1</span>
    <span class="inlineblock span2 over">span2</span>
    <span class="span3">span3</span>
  </div>
</body>
</html>